<template>
  <base-page v-bind="baseInfo">
    <template #searchBar>
      <filter-form
        ref="filterForm"
        :elements="elements"
        :hand="true"
        @submit="submit"
        @reset="reset"
      >
        <template>
          <el-button icon="el-icon-download" @click="downloadTemplateFun">导出</el-button>
        </template>
      </filter-form>
    </template>

    <template #content>
      <div class="flex flex-col flex-1 overflow-hidden lock-height">
        <el-tabs v-model="activeName">
          <el-tab-pane label="业务职能" name="1" />
          <el-tab-pane label="管理职能" name="2" />
        </el-tabs>

        <div class="flex flex-1 overflow-hidden table-box">
          <TableNew
            v-if="tableShow"
            class="flex-1"
            :loading="tableLoading"
            :data="tableData"
            :columns="columns"
            :pagination="pagination"
            :show-summary="true"
            :summary-method="getSummaries"
            @paginationChange="paginationChange"
          />
        </div>
      </div>
    </template>
  </base-page>
</template>

<script>
import baseFilterTable from '@/mixins/baseFilterTable'
import listMixins from '@/mixins/budgetQuert/listMixins'
import { listYsDepartment, releaseBudget, releaseDownload } from '@/api/budgetQuert'
import { getQuarter } from '@/utils/publicFun'
import exportDownload from '@/mixins/budgetQuert/exportDownload'
import filterMixins from '@/mixins/budgetQuert/filterMixins'

export default {
  name: 'Transmit', // 业务-预算下达数据
  components: {},
  mixins: [baseFilterTable, listMixins, exportDownload, filterMixins],
  data() {
    return {
      listInterface: releaseBudget,
      downloadInterface: releaseDownload,

      baseInfo: {
        searchBarShow: true
      },

      name: '业务-预算下达数据',

      activeName: '1',

      elements: [
        {
          label: '期间',
          type: 'date-picker',
          mode: 'monthrange',
          format: 'yyyy-MM',
          key: 'date',
          value: '',
          expiredDate: true
        },
        // {
        //   label: '部门',
        //   type: 'select',
        //   options: [],
        //   key: 'deptCode',
        //   itemValue: 'departmentCode',
        //   itemLabel: 'departmentName',
        //   value: ''
        // },
        {
          label: '预算科目名称',
          type: 'input',
          key: 'subjectName',
          value: '',
          width: 140
        },
        {
          label: '预算科目编码',
          type: 'input',
          key: 'subjectCode',
          value: '',
          width: 140
        }
      ],

      tableShow: true,
      reconstruction: true,
      columns: [],
      columnsBefore: [
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 100
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 100
        },
        {
          title: '部门',
          dataIndex: 'departmentName',
          width: 120
        }
      ],
      columnsIn: [],
      columnsAfter: [
        {
          title: '全年合计',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(元)',
              dataIndex: 'sxTotal',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(元)',
              dataIndex: 'xgTotal',
              format: true,
              align: 'right'
            },
            {
              title: '合计(元)',
              dataIndex: 'total',
              format: true,
              align: 'right'
            }
          ]
        }
      ],
      tableData: [],
      tableSum: {}
    }
  },
  watch: {
    activeName(val) {
      this.columns = [...this.columnsBefore, ...this.columnsIn, ...this.columnsAfter]
      this.tableData = []
      this.tableSum = []
      this.$refs.filterForm.submitFormFilter()

      this.filterFun(listYsDepartment, 1, { status: val === '1' ? 1 : null, manageStatus: val === '1' ? null : 0 })
    }
  },
  mounted() {
    const quarter = getQuarter('YYYY-MM')
    this.elements[0].value = [quarter.startTime, quarter.endTime]

    this.filterFun(listYsDepartment, 1, { status: this.activeName === '1' ? 1 : null, manageStatus: this.activeName === '1' ? null : 0 })
  },
  methods: {
    reset() {
      const quarter = getQuarter('YYYY-MM')
      this.$refs.filterForm.handleForceSet({
        date: [quarter.startTime, quarter.endTime],
        deptCode: '',
        subjectName: '',
        subjectCode: ''
      })
      this.getData()
    },

    downloadTemplateFun() {
      const param = this.$refs.filterForm.getParms()
      if (param && param.date) {
        param.startTime = param.date[0]
        param.endTime = param.date[1]

        delete param.date
      }

      param.type = this.activeName

      const name = this.activeName === '1' ? '业务职能' : '管理职能'

      this.downloadTemplate(param, name)
    },

    parameterReconstruction(params) {
      params.type = this.activeName
      return params
    },

    dataReconstruction(res) {
      this.tableShow = false
      const tableHeader = []
      if (res.data && res.data.tableHeader) {
        res.data.tableHeader.forEach(item => {
          tableHeader.push({
            title: item.month,
            type: 'hasMerge',
            align: 'right',
            mergeList: [
              {
                title: '三香(元)',
                dataIndex: item.sa,
                format: true,
                align: 'right'
              },
              {
                title: '浒关(元)',
                dataIndex: item.xu,
                format: true,
                align: 'right'
              },
              {
                title: '合计(元)',
                dataIndex: item.he,
                format: true,
                align: 'right'
              }
            ]
          })
        })

        Object.keys(res.data.tableSum).map(key => {
          res.data.tableSum[key] = this.formatMoney(res.data.tableSum[key])
        })
      }

      this.columnsIn = tableHeader
      this.columns = [...this.columnsBefore, ...this.columnsIn, ...this.columnsAfter]
      this.tableData = res.data.tableData.list
      this.tableSum = res.data.tableSum
      this.pagination.total = res.data.tableData.total

      setTimeout(() => {
        this.tableShow = true

        setTimeout(() => {
          const tds = document.querySelectorAll('.table-box .el-table__footer-wrapper tr>td')

          tds[0].colSpan = 3
          tds[0].style.textAlign = 'center'
          tds[1].style.display = 'none'
          tds[2].style.display = 'none'
        })
      })
    },

    getSummaries(param) {
      const { columns } = param
      const sums = []

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }

        if (index === 1 || index === 2) {
          sums[index] = ''
          return
        }

        sums[index] = (this.tableSum && this.tableSum[column.property]) || 0
      })

      return sums
    }
  }
}
</script>

<style lang='less' scoped>
.table-box {
  height: calc(100% - 54px);
  display: flex;
  flex-direction: column;
}

.lock-height {
  height: 100%;
}
</style>
